<template>
    <div class="el-menu-demo">
        <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">
            <el-menu-item index="predict1">
                <router-link to="predict1">历史数据引导轨迹预测</router-link>
            </el-menu-item>
            <el-menu-item index="predict2">
                <router-link to="predict2" >轨迹融合模型</router-link>
            </el-menu-item>
            <el-menu-item index="3">
                <router-link to="">融合任务规则轨迹预测</router-link>
            </el-menu-item>
            <el-menu-item index="4">
                <router-link to="">集成学习轨迹预测</router-link>
            </el-menu-item>
            <el-menu-item index="5">
                <router-link to="">意图识别轨迹预测</router-link>
            </el-menu-item>
<!--            <el-menu-item index="entityRelation">-->
<!--                <router-link to="entityRelation">实体关系</router-link>-->
<!--            </el-menu-item>-->

        </el-menu>
    </div>

</template>
<script>
    export default {
        name: 'topMenu',
        data() {
            return {
                activeIndex: 'predict1',
            }
        },
        mounted() {
        },
        computed: {
            onRoutes() {
                // 当前激活菜单的 index
                let index = this.$route.path.replace('/', '')
                let title = this.$route.meta.title
                // 改变浏览器title
                document.title = title
                return index
            }
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    }
</script>

<style lang="scss" scoped>
    /*改变router-link样式*/
    a {
        text-decoration: none;
        color: inherit;
    }

    .el-menu {
        background:url("./../assets/imgs/predict/daohangbg.png");
        background-size: 100% 100%;
        padding: 10px;
    }

    .el-menu-item {
        font-size: 1.2rem;
        font-weight: 600;
    }

    .el-menu--horizontal > .el-menu-item {
        color: #fff;
    }
    .el-menu--horizontal>.el-menu-item {
        height: 30px;
        line-height: 30px;
        border-right: 1px solid #fff;
    }
    .el-menu--horizontal > .el-menu-item.is-active {
        color: #00c1d6;
    }

    .el-menu--horizontal .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
        outline: 0;
        ackground: linear-gradient(0deg, #00F6FF 0%, rgba(202,253,255,0.41) 100%);
    }

    .el-menu--horizontal > .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal > .el-menu-item:not(.is-disabled):hover, .el-menu--horizontal > .el-submenu .el-submenu__title:hover {
        background-color: #00F6FF;
    }

    .el-menu-item a {
        display: block;
        width: 200px;
        height: 100%;
    }

    .el-menu-item {
        padding: 0 !important;
    }

    .title {
        background: url("../assets/imgs/nav_bg_title.png");
        /*background-size: 100% 100%;*/
        width: 520px;
        font-size: 1.8rem;
        color: #fff;
        font-family: PingFangSC-Heavy;
        // margin-right: 50px;
        a {
            text-align: center;
            width: 90%;
        }
    }
</style>
